<template>
	<div class="trackingNum">
		<div class="leftBox">
			<span>快递单号</span>
			<div class='colorFFF'>
				<span>{{orderNum}}</span>
				<image src="../../static/images/Order/tracking_copy.png" mode="widthFix" @click='copy(orderNum)'>
				</image>
			</div>
		</div>
		<div class="rightBox">
			<span>发货时间</span>
			<div class='colorGary'>
				<span>2023年10月10日 21:20:47</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import {
		copy
	} from '../../utils/copy.ts'
	// copy功能
	const orderNum = ref('SF1003487868117')
</script>

<style lang="scss" scoped>
	@import '../../common.scss';

	.trackingNum {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding: $contentPadding;
		width: 91%;
		margin: 32px auto 4rem auto;
		/* height: 160px; */
		background: #2A2B2D;
		border-radius: 16px;
		box-sizing: border-box;
		color: #fff;
		font-size: 24px;

		.leftBox {
			margin-bottom: 24px;
		}

		.leftBox,
		.rightBox {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;

			.colorFFF {
				display: flex;
				align-items: center;
				color: #fff;
			}

			image {
				width: 33px;
				height: 33px;
				margin-left: 10px;
			}

			.colorGary {
				color: rgba(255, 255, 255, 0.4);
			}
		}
	}
</style>